<script setup>
import { mapUrl } from '@/utils/config'
import { patientStore } from '@/pinia/modules/patient'
import { useRouter, useRoute } from 'vue-router'
const infoStore = patientStore()
const router = useRouter()
const route = useRoute()
const { typeId } = route.params
const { id, tabShow } = route.query
window.addEventListener(
  'message',
  function (event) {
    // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
    const loc = event.data
    if (loc && loc.module === 'locationPicker') {
      const params = {
        address: loc.poiaddress + loc.poiname,
        addressLat: loc.latlng.lat,
        addressLng: loc.latlng.lng
      }
      infoStore.setPatientAddress(params)
      router.replace({
        path: `/edit-patients/${typeId}`,
        query: { id, tabShow }
      })
      // 防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
    }
  },
  false
)
</script>
<template>
  <div id="container">
    <iframe
      id="mapPage"
      width="100%"
      height="100%"
      frameborder="0"
      :src="mapUrl"
    ></iframe>
  </div>
</template>

<style lang="scss" scoped>
#container {
  height: 100vh;
}
</style>
